﻿@using ECG.Common
@using ECG.WebUI.CustomHelpers
@model IEnumerable<ProductImageHasColorInfoDto>
@{
    var avartarImage = new ProductImageHasColorInfoDto();
    if (Model.Any())
    {
        avartarImage = Model.First<ProductImageHasColorInfoDto>();
        //if ((from a in Model where a.Avartar select a).Any())
        //{
        //    avartarImage = (from a in Model where a.Avartar select a).First<ProductImageHasColorInfoDto>();
        //}
    }
}
<div class="p-img-slide">
    <div class="zoom-section">
        <div class="zoom-small-image box-p-img-detail">
            <a href="@string.Format("{0}/{1}", avartarImage.ImagePath, avartarImage.ImageName).ImagePathThumb(1200, 1200)" class="cloud-zoom" id='zoom1' rel="zoomWidth:480,zoomHeight: 320,adjustX: 10, adjustY:-4" onclick="return false;">
                <img src="@string.Format("{0}/{1}", avartarImage.ImagePath, avartarImage.ImageName).ImagePathThumb(293, 280)" alt="@avartarImage.Description" title="" />
            </a>
        </div>
        <div class="zoom-desc">
            <span class="icon-arrow-left"></span>
            <div class="slide-image-wrapper">
                <div class="slide-image">
                    <a href="@string.Format("{0}/{1}", avartarImage.ImagePath, avartarImage.ImageName).ImagePathThumb(1200, 1200)"
                       rel="useZoom: 'zoom1', smallImage: '@string.Format("{0}/{1}", avartarImage.ImagePath, avartarImage.ImageName).ImagePathThumb(293, 280)'"
                       class="cloud-zoom-gallery item-slide item-slide-show color-id-@avartarImage.ColorId" title="" onclick="return false;">
                        <img src="@string.Format("{0}/{1}", avartarImage.ImagePath, avartarImage.ImageName).ImagePathThumb(48, 48)" alt="@avartarImage.Description" class="zoom-tiny-image imgThumb" />
                    </a>
                    @{
                        var subModel = Model.Where(item => item.Id != avartarImage.Id);
                        var count = 1;
                        if (subModel.Count() > 0)
                        {
                            foreach (var item in subModel)
                            {
                                count++;
                                var classLastChild = "";
                                if (count % 5 == 0)
                                {
                                    classLastChild = "slideimgLast";
                                }
                                <a href="@string.Format("{0}/{1}", item.ImagePath, item.ImageName).ImagePathThumb(1200, 1200)"
                                   rel="useZoom: 'zoom1', smallImage: '@string.Format("{0}/{1}", item.ImagePath, item.ImageName).ImagePathThumb(293, 280)'"
                                   class="cloud-zoom-gallery item-slide item-slide-show color-id-@item.ColorId @classLastChild" title="" onclick="return false;">
                                    <img src="@string.Format("{0}/{1}", item.ImagePath, item.ImageName).ImagePathThumb(48, 48)" alt="@item.Description" class="zoom-tiny-image imgThumb" />
                                </a>
                            }
                        }

                        if (subModel.Count() < 10)
                        {
                            for (int i = 0; i < 10 - (subModel.Count() + 1); i++)
                            {
                                count++;
                                var classLastChild = "";
                                if (count % 5 == 0)
                                {
                                    classLastChild = "slideimgLast";
                                }
                                <a href="javascript:void(0);" rel="nofollow" class="@classLastChild slideimgBgImg"></a>
                            }
                        }

                    }
                </div>
            </div>
            <span class="icon-arrow-right"></span>
            <div class="clr"></div>
        </div>
    </div>
</div>